<template>
	<view class="setting-container">
		<view class="section-title">账号设置</view>
		<view class="setting-list">
			<view class="setting-item" @click="toEditProfile">
				<text>个人资料</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
<!-- 			<view class="setting-item" @click="toChangePassword">
				<text>修改密码</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view> -->
		</view>

		<!-- <view class="section-title">通用设置</view>
		<view class="setting-list">
			<view class="setting-item">
				<text>消息通知</text>
				<switch :checked="settings.notification" @change="toggleNotification" color="#54bcbd" />
			</view>
			<view class="setting-item">
				<text>深色模式</text>
				<switch :checked="settings.darkMode" @change="toggleDarkMode" color="#54bcbd" />
			</view>
		</view>

		<view class="section-title">其他</view>
		<view class="setting-list">
			<view class="setting-item" @click="toAbout">
				<text>关于我们</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
			<view class="setting-item" @click="toFeedback">
				<text>意见反馈</text>
				<u-icon name="arrow-right" color="#999" size="28"></u-icon>
			</view>
			<view class="setting-item" @click="clearCache">
				<text>清除缓存</text>
				<text class="cache-size">{{cacheSize}}</text>
			</view>
		</view> -->

		<button class="logout-btn" @click="logout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settings: {
					notification: true,
					darkMode: false
				},
				cacheSize: '0MB'
			}
		},
		onLoad() {
			// 从本地存储加载设置
			const savedSettings = uni.getStorageSync('settings');
			if (savedSettings) {
				this.settings = JSON.parse(savedSettings);
			}
			this.calculateCacheSize();
		},
		methods: {
			toEditProfile() {
				uni.navigateTo({ url: '/pages/mine/profile-edit' });
			},
			toChangePassword() {
				uni.navigateTo({ url: '/pages/mine/change-password' });
			},
			toAbout() {
				uni.navigateTo({ url: '/pages/mine/about' });
			},
			toFeedback() {
				uni.navigateTo({ url: '/pages/mine/feedback' });
			},
			toggleNotification(e) {
				this.settings.notification = e.detail.value;
				this.saveSettings();
			},
			toggleDarkMode(e) {
				this.settings.darkMode = e.detail.value;
				this.saveSettings();
				// 应用深色模式
				if (e.detail.value) {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#333333'
					});
				} else {
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor: '#54bcbd'
					});
				}
			},
			saveSettings() {
				uni.setStorageSync('settings', JSON.stringify(this.settings));
			},
			calculateCacheSize() {
				// 这里可以添加计算缓存大小的逻辑
				this.cacheSize = '2.5MB';
			},
			clearCache() {
				uni.showModal({
					title: '提示',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							this.cacheSize = '0MB';
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/login'
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.setting-container {
		background: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	.section-title {
		margin: 32rpx 20rpx 12rpx 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
	}
	.setting-list {
		background: #fff;
		border-radius: 12rpx;
		margin: 0 20rpx;
	}
	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	.setting-item:last-child {
		border-bottom: none;
	}
	.setting-item text {
		font-size: 28rpx;
		color: #333;
	}
	.cache-size {
		font-size: 24rpx;
		color: #999;
	}
	.logout-btn {
		margin: 60rpx 20rpx;
		background: #ff4d4f;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 20rpx 0;
		font-size: 28rpx;
	}
</style> 